<template>
  <div>
    <el-card class="box-card">
      <!--      输入栏部分-->
      <div class="text item" :style="height">
        <!--        第一行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据编号:</span>
                <el-input
                    placeholder="请输入单据号"
                    v-model="input1"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">商品信息:</span>
                <el-input
                    placeholder="请输入条码、名称、规格、型号"
                    v-model="input2"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据日期:</span>
                <el-date-picker
                    style="width: 70%"
                    v-model="value1"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-button type="primary" @click="">查 询</el-button>
                <el-button @click="">重 置</el-button>
                <div style="display: inline-block;color: #40a9ff;cursor: pointer" @click="active()">
                  <span style="margin-left: 20px">{{ dj }}</span>
                  <div style="display: inline-block">
                    <svg :t="t" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" :p-id="p_id" width="14" height="14">
                      <path
                          :d="d"
                          :p-id="p_id" fill="#1296db"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        第二行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">会员卡号:</span>
                <template>
                  <el-select v-model="value1" filterable placeholder="请输入会员卡号" clearable style="width: 70%">
                    <el-option
                        v-for="item in options1"
                        :key="item.value1"
                        :label="item.label1"
                        :value="item.value1">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">仓库名称:</span>
                <template>
                  <el-select v-model="value2" filterable placeholder="请输入仓库" style="width: 70%">
                    <el-option
                        v-for="item in options2"
                        :key="item.value2"
                        :label="item.label2"
                        :value="item.value2">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">操作员:</span>
                <template>
                  <el-select v-model="value3" filterable placeholder="请选择操作员" style="width: 73.5%">
                    <el-option
                        v-for="item in options3"
                        :key="item.value3"
                        :label="item.label3"
                        :value="item.value3">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">结算账户:</span>
                <template>
                  <el-select v-model="value4" filterable placeholder="请输入结算账户" style="width: 70%">
                    <el-option
                        v-for="item in options4"
                        :key="item.value4"
                        :label="item.label4"
                        :value="item.value4">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        第三行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据状态:</span>
                <template>
                  <el-select v-model="value5" placeholder="请选择单据状态" style="width: 70%">
                    <el-option
                        v-for="item in options5"
                        :key="item.value5"
                        :label="item.label5"
                        :value="item.value5"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据备注:</span>
                <el-input
                    placeholder="请输入单据备注"
                    v-model="input3"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!--      新增操作以及表格部分-->
      <div style="padding-top: 10px">
        <!--        按钮部分-->
        <el-button type="primary" @click="outerVisible = true" style="margin-right: 10px"><i class="el-icon-plus"></i>
          新增
        </el-button>

        <el-dropdown>
          <el-button plain>
            批量操作
            <svg t="1654231867884" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2287" width="12" height="12">
              <path
                  d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                  p-id="2288" fill="#409EFF"></path>
            </svg>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">审核</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-close">反审核</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!--        表格部分-->
        <div style="margin-top: 20px">
          <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                label="会员"
                width="160">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="单据编号"
                width="200">
              <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column
                label="商品信息"
                width="300">
              <template slot-scope="scope">{{ scope.row.info }}</template>
            </el-table-column>
            <el-table-column
                label="单据日期"
                width="200">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="操作员"
                width="100">
              <template slot-scope="scope">{{ scope.row.operator }}</template>
            </el-table-column>
            <el-table-column
                label="合计金额"
                width="100">
              <template slot-scope="scope">{{ scope.row.amount }}</template>
            </el-table-column>
            <el-table-column
                label="收款金额"
                width="100">
              <template slot-scope="scope">{{ scope.row.get }}</template>
            </el-table-column>
            <el-table-column
                label="找零"
                width="100">
              <template slot-scope="scope">{{ scope.row.change }}</template>
            </el-table-column>
            <el-table-column
                label="状态"
                width="100">
              <template slot-scope="scope">{{ scope.row.state }}</template>
            </el-table-column>
            <el-table-column
                label="操作"
                min-width="100">
              <template slot-scope="scope">
                <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)"
                               title="这是一段内容确定删除吗？">
                  <el-button size="mini"
                             type="danger" slot="reference">删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--            <div style="margin-top: 20px">-->
          <!--              <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
          <!--              <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--            </div>-->
        </div>

      </div>

      <!--      新增操作弹框-->
      <div>
        <!--        外层的弹框-->
        <el-dialog title="新增" :visible.sync="outerVisible" width="80%" style="min-width: 1800px" class="addNew">
          <!--          输入行-->
          <el-row style="height: 60px">
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">会员卡号:</span>
                <template>
                  <el-select v-model="value6" filterable placeholder="请输入会员卡号" clearable style="width: 70%">
                    <el-option
                        v-for="item in options6"
                        :key="item.value6"
                        :label="item.label6"
                        :value="item.value6">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span class="demonstration" style="margin-right: 25px">单据日期:</span>
                <el-date-picker
                    v-model="value7date"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据编号:</span>
                <el-input
                    v-model="input4"
                    style="width: 70%"
                    readonly>
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">单据状态:</span>
                <template>
                  <el-select v-model="value8" placeholder="请选择单据状态" style="width: 70%">
                    <el-option
                        v-for="item in options8"
                        :key="item.value8"
                        :label="item.label8"
                        :value="item.value8"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
          </el-row>

          <el-button type="primary" style="margin-left: 10px"><i class="el-icon-plus"></i>
            新增行
          </el-button>
          <el-button style="margin-left: 10px;padding: 13px 20px 13px 20px">
            扫码录入
          </el-button>
          <el-dropdown style="margin-left: 10px">
            <el-button plain>
              仓库操作
              <svg t="1654231867884" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="2287" width="12" height="12">
                <path
                    d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                    p-id="2288" fill="#409EFF"></path>
              </svg>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-setting" @click.native="innerVisible1 = true">批量设置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-plus" @click.native="innerVisible2 = true">新增仓库</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!--          批量设置仓库内层弹框-->
          <el-dialog
              width="30%"
              title="批量设置仓库"
              :visible.sync="innerVisible1"
              append-to-body>
            <div style="margin-left: 50px;height: 120px">
              <span style="margin: 25px">仓库名称:</span>
              <el-select v-model="value9" filterable placeholder="请选择仓库" clearable style="width: 70%">
                <el-option
                    v-for="item in options9"
                    :key="item.value9"
                    :label="item.label9"
                    :value="item.value9">
                </el-option>
              </el-select>
            </div>
            <div style="margin-top: 50px;border-top: 1px solid #e8e8e8;padding: 30px 30px 0 30px;text-align: right">
              <el-button @click="innerVisible1 = false">关 闭</el-button>
              <el-button type="primary" @click="">确 认</el-button>
            </div>
          </el-dialog>

          <!--          新增仓库内层弹框-->
          <el-dialog
              width="30%"
              title="新增仓库"
              :visible.sync="innerVisible2"
              append-to-body>
            <el-form ref="form-new-warehouse" :model="form_new_warehouse" label-width="auto">
              <div style="margin-left: 50px">
                <el-form-item>
                  <span style="margin-right: 25px">仓库名称:</span>
                  <el-input
                      placeholder="请输入仓库名称"
                      v-model="input5"
                      style="width: 70%">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <span style="margin-right: 25px">仓库地址:</span>
                  <el-input
                      placeholder="请输入仓库地址"
                      v-model="input6"
                      style="width: 70%">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <span style="margin: 0 25px 0 15px">仓储费:</span>
                  <el-input
                      placeholder="请输入仓储费"
                      v-model="input7"
                      style="width: 70%">
                    <i slot="suffix" style="font-style: normal; margin-right: 10px">元/天/KG</i>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <span style="margin: 0 25px 0 15px">搬运费:</span>
                  <el-input
                      placeholder="请输入搬运费"
                      v-model="input8"
                      style="width: 70%">
                    <i slot="suffix" style="font-style: normal; margin-right: 10px">元</i>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <span style="margin: 0 25px 0 15px">负责人:</span>
                  <el-select v-model="value10" filterable placeholder="请选择负责人" style="width: 70%">
                    <el-option
                        v-for="item in options10"
                        :key="item.value10"
                        :label="item.label10"
                        :value="item.value10">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <span style="margin: 0 25px 0 30px">备注:</span>
                  <el-input
                      type="textarea"
                      :rows="2"
                      v-model="textarea"
                      style="width: 70%">
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item>
                <div style="margin-top: 50px;border-top: 1px solid #e8e8e8;padding: 30px 30px 0 30px;text-align: right">
                  <el-form-item>
                    <el-button @click="innerVisible2 = false">关 闭</el-button>
                    <el-button type="primary" @click="">确 认 添 加</el-button>
                  </el-form-item>
                </div>
              </el-form-item>
            </el-form>
          </el-dialog>

          <!--          表格部分-->
          <div >
            <el-row :gutter="20">

              <!--            表格-->
              <el-col :span="18">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                  <el-table-column
                      type="selection"
                      width="55">
                  </el-table-column>
                  <el-table-column
                      label="仓库名称"
                      width="100">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column
                      label="条码"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      label="名称"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      label="规格"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      label="库存"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      label="单位"
                      width="60">
                  </el-table-column>
                  <el-table-column
                      label="数量"
                      width="60">
                  </el-table-column>
                  <el-table-column
                      label="单价"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      label="金额"
                      width="80">
                  </el-table-column>
                  <el-table-column
                      label="备注"
                      show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </el-col>

              <!--            金额-->
              <el-form>
                <el-col :span="6" class="right-money">
                  <el-form-item>
                    <span style="font-size: 25px;line-height: 25px;font-weight: bold">单据金额:</span>
                    <el-input v-model="input9" style="width: 60%" readonly class="a"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span style="font-size: 25px;line-height: 25px;font-weight: bold">收款金额:</span>
                    <el-input v-model="input10" style="width: 60%" class="b"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <span style="font-size: 25px;line-height: 25px;font-weight: bold;margin-left: 50px">找零:</span>
                    <el-input v-model="input11" style="width: 60%" class="c"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>

<!--          上传附件  (待完成)-->
          <span>上传附件</span>

          <div style="margin-top: 70px;border-top: 1px solid #e8e8e8;padding: 30px 30px 0 30px;text-align: right">
            <el-button @click="outerVisible = false">关 闭</el-button>
            <el-button @click="">保存并审核</el-button>
            <el-button type="primary" @click="">保 存</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "RetailOutWarehouse",
  data() {
    return {
      restaurants: [],
      options1: [
        {
          value1: '选项1',
          label1: '123'
        }, {
          value1: '选项2',
          label1: '456'
        }, {
          value1: '选项3',
          label1: '789'
        }, {
          value1: '选项4',
          label1: '987'
        }, {
          value1: '选项5',
          label1: '654'
        }],
      options2: [],
      options3: [],
      options4: [],
      options5: [{
        value5: '选项1',
        label5: '未审核'
      }, {
        value5: '选项2',
        label5: '已审核'
      }],
      options6: [],
      options8: [{
        value8: '选项1',
        label8: '现付'
      }],
      options9: [],
      options10: [],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7date: '',
      value8: '先付',
      value9: '',
      value10: '',
      input1: '',
      input2: '',
      input3: '',
      input4: 'LSCK00000274203',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      input9: '0',
      input10: '0',
      input11: '0',
      height: 'height: 40px',
      t: '1654086700588',
      p_id: '2321',
      d: 'M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z',
      dj: '展开',
      tableData: [],
      multipleSelection: [],
      outerVisible: false,
      innerVisible1: false,
      innerVisible2: false,
      innerVisible3: false,
      textarea: '',//备注输入框..
    }
  }, methods: {
    active() {
      if (this.height === 'height: 40px') {
        this.height = 'height: 150px'
        this.dj = '收起'
        this.t = '1654086445974'
        this.p_id = '2147'
        this.d = 'M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z'
      } else {
        this.height = 'height: 40px'
        this.dj = '展开'
        this.t = '1654086700588'
        this.p_id = '2321'
        this.d = 'M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(index, row) {
      console.log(index + "===" + row.name);
      this.tableData.splice(index, 1);
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  overflow: hidden;
  transition: all 0.5s;
}

.box-card {
  margin: 10px 10px 10px 10px;
  height: 600px;
}


.right-money .el-input__inner {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #e8e8e8;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

.right-money .a .el-input__inner{
  color: purple;
}

.right-money .b .el-input__inner{
  color: red;
}
.right-money .c .el-input__inner{
  color: green;
}

.right-money .el-input__inner:hover {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #40a9ff;
}

.addNew .el-dialog__body{
  min-height: 600px;
}

</style>
